import React, { useState, useEffect } from 'react';
import './index.css';
import { Form, Input, Radio, Divider } from 'antd';
import { componentType, componentList } from '../../../api/component/data.js';
import PubSub from 'pubsub-js';
/**
 * 设置状态类型，通过状态改变页面显示效果
 * 
 * 
 * 在通过PubSub传递消息和订阅，以及取消订阅
 * 
 */
function NavigationBar() {
  //设置状态为0
  const [isWhichType, setIsWhichType] = useState('0');
  useEffect(() => {
      //取消订阅---------------------------------------------------------resetBar
    PubSub.unsubscribe('resetBar');
    //订阅消息----------------------------------------------------------------resetBar
    PubSub.subscribe('resetBar', (msg, data) => {
      setIsWhichType(data);
    });
  });

  const typeFilter = (values) => {
    PubSub.publish('filterType', { key: values.target.value });
    setIsWhichType(values.target.value);
    console.log('FilterType',values.target.value)
  };

  const onAllData = () => {
       //发送消息------------------------------------------------filterFilterType
    PubSub.publish('filterType', { key: '全部' });
  };

  const searchComponentName = (values) => {
      //发送消息------------------------------------------------filterName
    PubSub.publish('filterName', { key: values.target.value });
   
  };
  const typeListData = () => {
    let barList = [
      <Radio.Button onClick={onAllData} value="0">
        全部
      </Radio.Button>,
    ];
    for (let i = 0; i < componentType.length; i++) {
      barList.push(
        <Radio.Button onClick={typeFilter} value={componentType[i]['id']}>
          {componentType[i]['name']}
        </Radio.Button>
      );
    }
    return barList;
  };

  return (
    <Form autoComplete="off">
      <Form.Item label="组件类型" name="componentType">
        <Radio.Group defaultValue={isWhichType} size="small">
           console.log('FilterType',values.target.value)
          {typeListData()}
          
        </Radio.Group>
      </Form.Item>
      <Divider dashed={true} />
      <Form.Item label="其他选项" name="componentName">
        <span>配置名称:</span>
        <Input
        //绑定回车回调
          onPressEnter={searchComponentName}
          style={{ width: 240, marginLeft: 10, borderRadius: 4 }}
        />
      </Form.Item>
    </Form>
  );
}

export default NavigationBar;
